<template>
    <div class="dialog">

        <!-- visible.sync 添加以后才能正常关闭-->
        <el-dialog :title="dialog.title"
                   :visible.sync="dialog.show"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   :modal-append-to-body="false">

            <div class="form">
                <el-form
                        ref="form"
                        :model="fromData"
                        :rules="rules"
                        label-width="120px"
                        style="margin:10px;width:auto;">

                    <el-form :model="fromData" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
                        <el-form-item label="角色名称" prop="roleName">
                            <el-input v-model="fromData.roleName" placeholder="角色名称"></el-input>
                        </el-form-item>

                        <el-form-item prop='status' label="状态:">
                            <el-radio-group v-model="fromData.status">
                                <el-radio :label="1">激活</el-radio>
                                <el-radio :label="0">锁定</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="fromData.remark" placeholder="备注"></el-input>
                        </el-form-item>
                        <el-form-item size="mini" label="权限">
                            <el-tree
                                    :data="menuList"
                                    :props="menuListTreeProps"
                                    node-key="menuId"
                                    ref="menuListTree"
                                    :default-expand-all="false"
                                    show-checkbox>
                            </el-tree>
                        </el-form-item>
                    </el-form>

                    <el-form-item class="text_right">
                        <el-button @click="dialog.show = false">取 消</el-button>
                        <el-button type="primary" @click='onSubmit("form")'>提 交</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "RoleDialog",
        props: {
            dialog: Object,
            fromData: Object
        },
        data() {
            return {
                menuList: [],
                menuListTreeProps: {
                    label: 'name',
                    children: 'children'
                },
                rules: {
                    roleName: [
                        {required: true, message: "角色名称不能为空！", trigger: "blur"}
                    ],
                }
            }

        },
        created() {
            this.$axios.get("/api/menu/tree").then(res => {
                if (res.data.code === 0) {
                    this.menuList = res.data.data;
                }
            });
        },
        methods: {
            onSubmit(form) {
                this.$refs[form].validate(valid => {
                    if (valid) {
                        //表单数据验证完成之后，提交数据;
                        let headers = {
                            'Content-Type': 'application/json'
                        };
                        this.$axios.request({
                                url: '/api/user',
                                method: this.dialog.option == "add" ? "post" : "put",
                                data: JSON.stringify(this.fromData),
                                headers: headers
                            }
                        ).then(res => {
                            if (res.data.code === 0) {
                                // 操作成功
                                this.$message({
                                    message: "保存成功！",
                                    type: "success"
                                });
                                this.dialog.show = false;
                                this.$emit("update");    //父的update
                            }
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
